<template>
    <div id="command">
        <cube-input v-model.trim="question" placeholder="请输入问题" :maxlength="50"></cube-input>
        <cube-input v-model.trim="answer" placeholder="请输入正确答案" :maxlength="20"></cube-input>
    </div>
</template>

<script>
    export default {
        name: "question",
        data(){
          return {
              question:"",  //问题
              answer:""   //答案
          }
        },
        computed:{
            //数据
            data_data(){
                let data = [this.question,this.answer];
                return data;
            }
        },
        watch:{
          data_data(){
              this.$emit("change",this.data_data);
          }
        },
        model:{
            prop:'data',
            event:"change"
        },
        props:{
            data:{
                type:Array,
                default(){
                    return [];
                }
            }
        },
        created(){
            this.setData();
        },
        mounted(){
          let Input = document.querySelectorAll("#command input");
            Input.forEach((item)=>{
                item.addEventListener("blur",()=>{
                    window.scroll(0,0);
                });
            });
        },
        methods:{
            setData(){
                if(this.data.length > 0){
                    this.question = this.data[0];
                    this.answer = this.data[1];
                }
            }
        }
    }
</script>
